<template>
	<view class="userInfo">
		<view class="user_info_image_box">
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="user_img" :src="editUserInfo.image" mode=""></image>
			</button>
			<view class="update_img">点击上传头像</view>
		</view>
		<view class="nick_name_box">
			<view class="area-title">昵称</view>
			<view class="nick_name_input"><input v-model="editUserInfo.real_name" type="nickname" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="person_info_box">
			<view class="area-title">个人简介</view>
			<view class="person_info_input"><textarea v-model="editUserInfo.desc" placeholder="请输入你的个人简介"></textarea>
			</view>
		</view>
		<view class="upload_bg_box">
			<view class="area-title">背景图</view>
			<view class="upload_img_list">
				<uploadImage ref="uploadImage" :maxCount="1" @success="uploadSuccess"></uploadImage>
			</view>
		</view>
		<view class="save_btn"><button class="yellow_btn" @tap="saveUserInfo">保存</button></view>
	</view>
</template>

<script>
	import uploadImage from '../../components/uploadImage/uploadImage.vue';
	// import config from '../../config/http.config.js';
	export default {
		components: {
			uploadImage
		},
		data() {
			return {
				qiniuUrl: 'http://qiniu.zhinh.cn/',
				userInfo: {},
				editUserInfo: {
					real_name: '',
					image: '',
					desc: '',
					back_image: ''
				}
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			uploadSuccess(val) {
				console.log(val, '上传图片');
				this.editUserInfo.back_image = this.qiniuUrl + val[0].url;
			},
			getUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo');
				this.editUserInfo.real_name = this.userInfo.member.real_name;
				this.editUserInfo.image = this.userInfo.member.image;
				this.editUserInfo.desc = this.userInfo.member.desc;
				this.editUserInfo.back_image = this.userInfo.member.back_image;
				if (this.editUserInfo.back_image) {
					this.$refs.uploadImage.fileList5 = [{
						url: this.userInfo.member.back_image_view
					}];
				}
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				this.$helper.uploadTempFile(avatarUrl).then(res => {
					this.editUserInfo.image = this.qiniuUrl + res.url;
					console.log(res, this.qiniuUrl + res.url, '修改头像');
				});
				// const { avatarUrl } = e.detail;
				// this.editUserInfo.image = avatarUrl;
			},
			//修改头像
			changeImage() {
				this.$helper.uploadFile().then(res => {
					this.editUserInfo.image = this.qiniuUrl + res.url;
					console.log(res, this.qiniuUrl + res.url, '修改头像');
				});
			},
			saveUserInfo() {
				var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
					regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
				if (regEn.test(this.editUserInfo.real_name) || regCn.test(this.editUserInfo.real_name)) {
					this.$helper.toast("名称不能包含特殊字符.");
					return;
				}

				this.$api.editMemberInfo(this.editUserInfo).then(res => {
					if (res.code == 1) {
						this.$helper.toast(res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.userInfo {
		min-height: 100vh;
		background-color: #fff;
		padding: 47rpx 24rpx 47rpx;

		.user_info_image_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			button {
				background-color: none;
				border: none;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				padding: 0;

				&::after {
					border: none;
					height: 0;
					width: 0;
					background-color: none;
				}
			}

			.user_img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.update_img {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.nick_name_box {
			margin-bottom: 40rpx;

			.nick_name_input {
				height: 90rpx;
				background: #f9f9f9;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 26rpx;

				input {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.person_info_box {
			margin-bottom: 40rpx;

			.person_info_input {
				height: 267rpx;
				background: #f9f9f9;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx 26rpx;

				textarea {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.upload_bg_box {
			margin-bottom: 56rpx;
		}

		.save_btn {}
	}
</style>